<template>
  <div class="dialog dialog-record" v-show="visible">
    <div class="dialog-mask"></div>
    <div class="dialog-content">
      <form class="form">
        <div class="form-item">
          <label for="name">name:</label>
          <div class="input">
            <input type="text" v-model="name" placeholder="record name">
          </div>
        </div>
        <div class="form-item">
          <label for="account">account:</label>
          <div class="input">
            <input
              type="text"
              v-model="account"
              placeholder="account"
              :readonly="!!account && isEdit">
          </div>
        </div>
        <div class="form-item">
          <label for="len">len:</label>
          <div class="input">
            <input type="number" min="4" max="32" v-model="len" placeholder="len">
          </div>
        </div>
        <div class="form-item">
          <label for="type">type:</label>
          <div class="input">
            <div class="input-checkbox">
              <input id="type-number" type="checkbox" value="number" v-model="type">
              <label for="type-number">number</label>
            </div>
            <div class="input-checkbox">
              <input id="type-char" type="checkbox" value="char" v-model="type">
              <label for="type-char">char</label>
            </div>
            <div class="input-checkbox">
              <input id="type-punctuation" type="checkbox" value="punctuation" v-model="type">
              <label for="type-punctuation">punctuation</label>
            </div>
          </div>
        </div>
      </form>
      <div class="btns">
        <button class="btn btn-primary btn-save" @click="onClickSaveBtn">save</button>
        <button class="btn btn-danger btn-cancel" @click="onClickCancelBtn">cancel</button>
      </div>
    </div>
    </div>
</template>

<script>
export default {
  name: 'EditDialog',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      name: '',
      account: '',
      len: 16,
      type: ['number', 'char', 'punctuation']
    }
  },
  watch: {
    visible: function onEditVisibleChange(visible) {
      if (visible) {
        this.name = this.data.name || ''
        this.account = this.data.account || ''
        this.len = this.data.len || 16
        this.type = this.data.type || ['number', 'char', 'punctuation']
      }
    }
  },
  computed: {
    isEdit() {
      return this.data.name !== ''
    }
  },
  methods: {
    onClickSaveBtn() {
      this.$emit('on-confirm', {
        name: this.name,
        account: this.account,
        len: this.len,
        type: this.type,
        isEdit: this.isEdit
      })
    },
    onClickCancelBtn() {
      this.$emit('update:visible', false)
    }
  }
}
</script>

<style lang="scss">
.dialog-record {
  .btns {
    margin-top: 20px;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
}
</style>
